<template>
	<view class="wrap">
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/tool/tool-nav-bg@2x.png" mode="widthFix"
			class="property-bg"></image>

		<view class="index-nav" :style="{
			background: scrollTop > 50 ? 'linear-gradient(90deg, #FD8D24 0%, #FF2E3F 100%, #FF323B 100%)' : 'transparent'
		}">
			<view class="status_bar">

			</view>
			<view class="flex items-center justify-between py-32">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/tool/tool-title.png"
					class="index-title" mode="heightFix"></image>
			</view>
		</view>

		<view class="content px-20">
			<view class="nav-tab-wrap flex items-center">
				<view class="tab text-FFF text-center mr-24" v-for="(item,index) in tabsList" :key="index" :style="{
					background:index == tabIndex ? 'linear-gradient( 180deg, #FF561D 33%, #FF0064 100%)' : '#D8D8D8'
				}" @click="tabIndex = index">
					{{item}}
				</view>
			</view>

			<view class="py-28 px-32 bg-FFF mt-32 round-24">
				<view class="text-9E9E9E">
					常用工具
				</view>
				<view class="grid grid-cols-4 gap-4" v-if="commonList.length > 0">
					<view class="mt-36 flex items-center flex-col" v-for="(item,index) in commonList" :key="index"
						@click="handleTool(item)">
						<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/tool/${item.icon}`"
							style="width: 72rpx;height: 72rpx;" mode=""></image>
						<view class="text-nowrap mt-20" :style="{
							color:item.active ? '#333' : '#ACACAC'
						}">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="my-32" v-else style="color: #F95914;">
					暂无常用工具
				</view>
			</view>

			<view class="py-28 px-32 bg-FFF mt-32 round-24">
				<view class="text-9E9E9E">
					聊天工具
				</view>
				<view class="grid grid-cols-4 gap-4">
					<view class="mt-36 flex items-center flex-col" v-for="(item,index) in chatToolList" :key="index"
						@click="handleTool(item)">
						<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/tool/${item.icon}`"
							style="width: 72rpx;height: 72rpx;" mode=""></image>
						<view class="text-nowrap mt-20" :style="{
							color:item.active ? '#333' : '#ACACAC'
						}">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

			<view class="py-28 px-32 bg-FFF mt-32 round-24">
				<view class="text-9E9E9E">
					应用工具
				</view>
				<view class="grid grid-cols-4 gap-4">
					<view class="mt-36 flex items-center flex-col" v-for="(item,index) in appToolList" :key="index"
						@click="handleTool(item)">
						<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/tool/${item.icon}`"
							style="width: 72rpx;height: 72rpx;" mode=""></image>
						<view class="text-nowrap mt-20" :style="{
							color:item.active ? '#333' : '#ACACAC'
						}">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				tabsList: [
					"常用工具",
					"聊天工具",
					"应用工具",
				],
				tabIndex: 0,
				commonList: [],
				chatToolList: [{
						icon: "icon_qunliao@2x.png",
						title: "我的群聊",
						active: true
					},
					{
						icon: "icon_aizhiliao.png",
						title: "AI Chat智聊",
					},
					{
						icon: "icon_haoyouliebiao.png",
						title: "好友列表",
					},
				],
				appToolList: [{
						icon: "icon_meikefengxiang.png",
						title: "每刻分享",
					},
					{
						icon: "icon_shoucang.png",
						title: "收藏",
					},
					{
						icon: "icon_gongzhonghao.png",
						title: "公众号",
					},
					{
						icon: "icon_suiji.png",
						title: "随记",
					},
					{
						icon: "icon_zhibo.png",
						title: "直播",
					},
				],
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onShow() {
			if (uni.getStorageSync('commonList')) {
				this.commonList = JSON.parse(uni.getStorageSync('commonList'))
			}
		},
		methods: {
			handleTool(row) {
				switch (row.title) {
					case "我的群聊":
						plus.share.getServices(
							res => {
								let sweixin = null;
								for (let i in res) {
									if (res[i].id == 'weixin') {
										sweixin = res[i];
									}
								}
								//唤醒微信小程序
								if (sweixin) {
									sweixin.launchMiniProgram({
										id: 'gh_54cde2bc9b29', //微信开放平台 --- 绑定的微信小程序的 --- 原始id
										type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
										path: '/pages/chat/index?groupId=92&isGroup=1&newUser=1' //小程序的页面,用传的参数在小程序接值判断跳转指定页面
									});
								} else {
									this.$modal.msg('请先安装微信!')
								}
							}
						);
						break
					default:
						this.$modal.msg('功能尚在开发中!')
				}
				if (uni.getStorageSync('commonList')) {
					let list = JSON.parse(uni.getStorageSync('commonList'))
					let index = list.findIndex(item => {
						return item.title == row.title
					})
					if (index == -1 && row.active) {
						this.commonList.unshift(row)
					}
				} else {
					this.commonList.unshift(row)
				}
				uni.setStorageSync('commonList', JSON.stringify(this.commonList))
			}
		}
	}
</script>

<style lang="scss">
	.property-bg {
		width: 100%;
	}


	.index-nav {
		width: 100%;
		padding: 0rpx 32rpx 0 32rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;

		.index-title {
			height: 40rpx;
		}

		.index-xiaoxi {
			width: 48rpx;
			height: 48rpx;
		}

	}

	.content {
		.nav-tab-wrap {
			.tab {
				width: 176rpx;
				height: 68rpx;
				background: #D8D8D8;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				line-height: 68rpx;
			}
		}
	}
</style>